<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="./swiper/css/swiper.css">
    <link rel="stylesheet" href="./css/BookSearch.css">
    <script src="dataJs/data.js"></script>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="jquery/jquery 1.11.0/jquery-1.11.0.js"></script>
    <script src="./js/BookSearch.js"></script>
    <script src="./template-web.js"></script>
    <script src="./swiper/js/swiper.min.js"></script>
</head>

<body>
    <div class="layui-container container">
        <span>
            <span>图书管理</span> /
            <span> 图书查询</span>
            <span class="clear"></span>
        </span>
        <!-- 搜索框 -->
        <div class="contentCute">
            <input type="text" id="search" name="search" class="layui-input inputStyle" placeholder="请输入你的名称">
            <button class="layui-btn btnClass" onclick="doSearch()">
                <i class="layui-icon layui-icon-search" style="font-size: 16px; color: white;"></i>
            </button>
        </div>

        <!-- 轮播图 -->
        <div class="swiper-container swipers">
                <div class="swiper-wrapper" id="swiper">
                        <div class="swiper-slide "><img src="./imgs/./slides/./slides01.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./imgs/./slides/./slides02.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./imgs/./slides/./slides03.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./imgs/./slides/./slides04.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./imgs/./slides/./slides05.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./imgs/./slides/./slides06.jpg" alt=""></div>
                </div>
            
                <div class="swiper-pagination"></div>
             
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
         
            <script>
                var mySwiper=new Swiper(".swiper-container",{
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true,//点击分页器可以切换
                    },
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // autoplay:true
                    autoplay:{
                        delay: 3000,//自动播放时间
                        // stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换
                        // disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
                    },
                    loop:true,
                    // slidesPerView:3,//同一个页面显示多个滑块
                    // effect:'coverflow'
                   
                });
            </script>


        <!-- 可查询的图书表格 -->
        <div class="contentCute tables">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>图片</th>
                    </tr>
                </thead>
                <tbody id="tb">
                </tbody>
            </table>
        </div>
    </div>

    <!-- 导入的表格模板 -->
    <script type="text/html" id="demo">
        <!-- 注意搜索的库 -->
        {{each guessLikes value index}}
        <tr>
            <td>{{ value.title }}</td>
            <td>{{ value.author }}</td>
            <td>{{ value.publishing }}</td>
            <td><img src="./imgs/guessLikes/{{ value.img }}" alt=""></td>
        </tr>
        {{/each}}
    </script>
</body>
<script>
        layui.use('layer', function () {
            var layer = layui.layer;
        });
    </script>
</html>